<template>
    <div class="div_box">

        <div class="div_left">
            <div style="position: relative;width: 80%;height: 50vh;">
                <!--视频组件-->
                <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"
                    style="height: 100%;">
                </video-player>
                <div class="slot_tips_h5player" v-show="playerflag == 1 || playerflag == 3">
                    <i class="el-icon-video-pause" v-show="playerflag == 1"></i>
                    <span v-show="playerflag == 1">暂停</span>
                    <i class="el-icon-loading" v-show="playerflag == 3 && flag"></i>
                    <span v-show="playerflag == 3 && flag">正在缓冲...</span>
                </div>
            </div>

            <div style="width: 80%;height: 6vh;overflow: hidden;position: relative;">
                <div class="timeLineContainer"
                    style="width: 70vw;height: 6vh;background-color: #1E2436;position: absolute;left: -21.2%;"
                    ref="timeLineContainer">
                    <canvas ref="canvas" @mousemove="onMousemove" @mousedown="onMousedown" @mousewheel="onMouseweel"
                        @mouseup="onMouseup" @mouseout="onMouseout"></canvas>
                </div>
            </div>

            <div class="webplayer_menu">
                <div class="webplayer-menu--left">

                    <!-- <el-tooltip class="item" effect="dark" content="" placement="bottom">
                    </el-tooltip> -->
                    <el-tooltip class="item" effect="dark" content="播放" placement="bottom"
                        v-show="playerflag == 1 || playerflag == 3">
                        <i class="el-icon-video-play" id="playerResumeButton"></i>
                    </el-tooltip>

                    <el-tooltip class="item" effect="dark" content="暂停" placement="bottom" v-show="playerflag == 2">
                        <i class="el-icon-video-pause" id="playerPauseButton" style="color: #7367F0;"></i>
                    </el-tooltip>

                </div>
                <div class="webplayer-menu--right">

                    <el-tooltip class="item" effect="dark" content="倍数回放" placement="bottom" v-if="live == 2">
                        <el-dropdown trigger="click" @command="onDropdown">
                            <span class="el-dropdown-link"
                                style="border: 1px solid #7367F0;padding: 4px 8px;cursor: pointer;background-color: #FFFFFF;">
                                {{ beishu }}X
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="0.5">0.5X</el-dropdown-item>
                                <el-dropdown-item command="1.0">1.0X</el-dropdown-item>
                                <el-dropdown-item command="1.5">1.5X</el-dropdown-item>
                                <el-dropdown-item command="2.0">2.0X</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-tooltip>

                    <el-tooltip class="item" effect="dark" content="分辨率" placement="bottom" v-if="live == 1">
                        <el-dropdown trigger="click" @command="onDropdown2">
                            <span class="el-dropdown-link"
                                style="border: 1px solid #7367F0;padding: 4px 8px;cursor: pointer;background-color: #FFFFFF;">
                                {{ Resolution }}
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="0">标清</el-dropdown-item>
                                <el-dropdown-item command="1">高清</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-tooltip>

                    <i class="iconfont huatong" id="audioTalkStop" style="color: #7367F0;" v-show="(!audio) && live == 1"></i>
                    <i class="iconfont huatong1" id="audioTalkStart" v-show="audio && live == 1"></i>

                    <i class="iconfont guanbiyinliang" id="playerVolume1" v-show="!playerVolumeflag"></i>
                    <i class="iconfont zengdayinliang" id="playerVolume" v-show="playerVolumeflag"
                        style="color: #7367F0;"></i>
                    <el-tooltip class="item" effect="dark" content="截图" placement="bottom">
                        <i class="iconfont qiepianjietu" id="playerScreenShot"></i>
                    </el-tooltip>

                    <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
                        <i class="iconfont quanping" id="fullScreen"></i>
                    </el-tooltip>

                    <!-- <el-tooltip class="item" effect="dark" content="日历" placement="bottom">
                        <i class="iconfont quanping" @click="calendar"></i>
                    </el-tooltip> -->

                </div>

            </div>

            <div class="huifang">
                <div @click="zhibo" :style="live == 1 ? 'background-color: #7467EF;color: #fff;' : ''">直播</div>
                <div @click="playback" :style="live == 2 ? 'background-color: #7467EF;color: #fff;' : ''">回放</div>
            </div>

            <div class="div_right">
                <!-- <p style="font-weight: 600;font-size: 12px;z-index: 99;">云台控制</p> -->
                <div class="video-ctrl-box">
                    <i class="el-icon-caret-left" @mousedown='leftClick' @mouseup='mouseupClick'></i>
                    <i class="el-icon-caret-right" @mousedown='rightClick' @mouseup='mouseupClick'></i>
                    <i class="el-icon-caret-bottom" @mousedown='bottomClick' @mouseup='mouseupClick'></i>
                    <i class="el-icon-caret-top" @mousedown='topClick' @mouseup='mouseupClick'></i>
                    <div class="ctrl-circle">控制台</div>
                </div>

            </div>

            <div class="div_zoom">
                <div @mousedown='magnify' @mouseup='mouseupClick'>+</div>
                <div>缩放</div>
                <div @mousedown='lessen' @mouseup='mouseupClick'>-</div>
            </div>

            <div class="div_focal">
                <div @mousedown='distant' @mouseup='mouseupClick'>+</div>
                <div>焦距</div>
                <div @mousedown='near' @mouseup='mouseupClick'>-</div>
            </div>

        </div>

    </div>
</template>

<script>
// axios全局配置，允许跨域带cookie
// axios.defaults.withCredentials = true;

import videojs from "video.js";
import "vue-video-player/src/custom-theme.css";
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import {
    reqCameraget,
    reqCameralogin,
    reqCamerainfo,
} from "@api/api.js";
import asc from "@utils/asc.js"; //前端加解密
import TimeScale from "./mixins/TimeScale.js";

export default {
    props: {
        deviceInfo: {
            type: Object,
            default: () => { },
        },
    },
    components: {
        videoPlayer,
    },
    mixins: [TimeScale],
    data() {
        return {
            // 视频控制设置
            playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: "video/mp4", // 类型
                        // src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", // url地址
                        src: "", // url地址
                    },
                ],
                poster: "", // 封面地址
                width: "1000", //document.documentElement.clientWidth 播放器宽度
                height: 100,
                notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: true, // 是否显示剩余时间功能
                    fullscreenToggle: true, // 是否显示全屏按钮
                    volumeControl: true, // 声音控制键
                    playToggle: true, // 暂停和播放键
                    progressControl: true, // 进度条
                },
            },
            logoindata: {},
            Camerainfo: {},
            userInfo: {
                username: "",
                password: "",
            },
            webPlayer: null,
            playerflag: 3,// 暂停1 播放2 缓冲3
            flag: false,//无MAC地址
            playerVolumeflag: true,//声音
            audio: true,//麦克风
            live: 1,
            beishu: "1.0",
            Resolution: "高清",
        };
    },
    computed: {},
    watch: {},
    methods: {
        //获取摄像头账号密码
        async Cameraget() {
            const res = await reqCameraget()
            this.userInfo.username = res.data.rows.username;
            this.userInfo.password = res.data.rows.password;
        },
        //摄像头账号登录
        async Cameralogin() {
            // 加密
            const res = await reqCameralogin(asc.encryption({
                data: this.userInfo,
                key: 'thank,cloudstore', //加密用的key
                param: ['password'],
            }))
            //    console.log(res);
            this.logoindata = res.data.row
        },
        //获取摄像头设备详情
        async reqCamerainfo() {
            const res = await reqCamerainfo({
                deviceMac: this.deviceInfo.deviceMac,
                token: this.logoindata.access_token
            })
            //    console.log(res);
            this.Camerainfo = res.data.row;
        },
        // 初始化播放器
        initWebPlayer() {
            // console.log(this.Camerainfo);
            if (this.Camerainfo == null || this.Camerainfo == '') {
                this.flag = false;
                this.$modal.notifyWarning('设备MAC地址不正确');
                return
            } else {
                this.flag = true;
            }
            // console.log(this.Camerainfo);
            this.webPlayer = new WebPlayer({
                productKey: '9fea0cdb-0ca',
                channelNo: '', //NVR设备传入通道号，IPC设备传入 ''
                token: this.Camerainfo.token,
                deviceId: this.Camerainfo.deviceMac,
                channel: '720p',
                playerContainer: '.video-player',
                hasAudio: true,
                hasBaseUI: false,
                platform: 'bluramsBZ',
                runtimeEnv: 'pro',
                // isSDCardPlayback: true //当是SD卡回放时传入
            });
            // console.log(this.webPlayer);
            // console.log(WebPlayer.WebPlayerEvents.PLAYER_INIT);
            let isPlayInit = false;
            this.webPlayer.on(WebPlayer.WebPlayerEvents.PLAYER_INIT, () => {
                //初始化成功
                // console.log('初始化成功',this.webPlayer);
                let deviceStatus = this.webPlayer.getCanPlayStatus();//获取设备可播放状态
                //设备在线且设备开关打开
                if (deviceStatus.onlineStatus && deviceStatus.deviceStatus) {
                    this.webPlayer.play();//播放直播
                } else {
                    //TODO 显示设备离线或关闭状态UI
                }
                isPlayInit = true;
            });
            this.webPlayer.on(WebPlayer.WebPlayerEvents.PLAYER_INIT_ERROR, () => {
                console.log('初始化失败');//初始化失败
            });

            //点击暂停按钮
            document.querySelector('#playerPauseButton').addEventListener('click', () => {
                if (!isPlayInit) return;
                this.webPlayer.pause();//播放暂停
            }, false);

            //点击恢复播放按钮
            document.querySelector('#playerResumeButton').addEventListener('click', () => {
                if (!isPlayInit) return;
                this.webPlayer.resume();//恢复播放
            }, false);

            this.webPlayer.on(WebPlayer.WebPlayerEvents.PLAYER_BUFFER, () => {
                //正在缓冲视频，显示加载状态UI和其它UI操作
                // console.log('正在缓冲视频');
                this.playerflag = 3;
            });

            //开始播放，从非播放状态到播放状态时触发,网络不佳时，频繁loading时会多次触发
            this.webPlayer.on(WebPlayer.WebPlayerEvents.PLAYER_PLAY, () => {
                //开始播放视频，隐藏加载状态、暂停状态等UI
                // console.log('开始播放视频');
                this.playerflag = 2;
            });

            this.webPlayer.on(WebPlayer.WebPlayerEvents.PLAYER_PAUSE, () => {
                //播放暂停，显示暂停状态UI
                // console.log('播放暂停');
                this.playerflag = 1;
            });


            //打开音量
            document.querySelector('#playerVolume1').addEventListener('click', (e) => {
                if (!isPlayInit) return;
                var value = 1; // 取值[0-1]
                this.webPlayer.setVolume(value);
                this.playerVolumeflag = true;
            }, false)

            //关闭声音
            document.querySelector('#playerVolume').addEventListener('click', (e) => {
                if (!isPlayInit) return;
                var value = 0; // 取值[0-1]
                this.webPlayer.setVolume(value);
                this.playerVolumeflag = false;
            }, false)


            // 开始对讲
            let canAudioTalk = false;
            document.querySelector('#audioTalkStart').addEventListener('click', (e) => {
                let isSupportAudioTalk = WebPlayer.isSupportAudioTalk();
                if (!isSupportAudioTalk) return this.$modal.notifyWarning('暂不支持语音对讲');
                if (!isPlayInit || this.webPlayer.isRecord()) return;
                this.webPlayer.initTalk((error) => {
                    if (!error) {
                        canAudioTalk = true;
                        this.webPlayer.startTalk();//开始对讲
                        this.audio = false;
                        return;
                    }
                    this.$modal.notifyWarning('请确认已打开系统麦克风权限或者浏览器麦克风权限！');
                    console.error(error, '12312312');
                })
            }, false);

            //结束通话
            document.querySelector('#audioTalkStop').addEventListener('click', (e) => {
                canAudioTalk && this.webPlayer.stopTalk()
                this.audio = true;
            }, false);


            //截屏
            document.querySelector('#playerScreenShot').addEventListener('click', (e) => {
                if (!isPlayInit) return;
                const isOrigin = true;
                //截屏，safari浏览器不支持该截屏功能
                let base64Image = this.webPlayer.screenShot(isOrigin);
                //在<img/>中显示
                if (base64Image) {
                    // console.log(base64Image);
                    this.phoneDown(base64Image, `直播截图`)
                }
            }, false);

            // 进入全屏
            document.querySelector('#fullScreen').addEventListener('click', (e) => {
                WebPlayer.requestFullScreen(document.querySelector('.video-player'));
            }, false);
            // this.getSection()

        },
        // 从回放回到直播
        zhibo() {
            this.live = 1
            let isRecord = this.webPlayer.isRecord();
            if (isRecord) {
                this.webPlayer.play();//播放直播
            }
        },
        // 倍数
        onDropdown(e) {
            // console.log(e);
            switch (e) {
                case "0.5":
                    this.beishu = 0.5
                    var value = 0.5; // 取值[0.25, 0.5, 1, 2, 4]
                    this.webPlayer.setPlaybackRate(value);
                    break;
                case "1.0":
                    this.beishu = 1.0
                    var value = 1.0; // 取值[0.25, 0.5, 1, 2, 4]
                    this.webPlayer.setPlaybackRate(value);
                    break;
                case "1.5":
                    this.beishu = 1.5
                    var value = 1.5; // 取值[0.25, 0.5, 1, 2, 4]
                    this.webPlayer.setPlaybackRate(value);
                    break;
                case "2.0":
                    this.beishu = 2.0
                    var value = 2.0; // 取值[0.25, 0.5, 1, 2, 4]
                    this.webPlayer.setPlaybackRate(value);
                    break;
            }
        },
        // 标清 高清
        onDropdown2(e) {
            switch (e) {
                case "0":
                    this.Resolution = '标清'
                    this.webPlayer.setResolution(0);
                    break;
                case "1":
                    this.Resolution = '高清'
                    this.webPlayer.setResolution(1);
                    break;
            }
        },
        leftClick() {
            let isSupportPTZ = this.webPlayer.isSupportPTZ();
            if (!isSupportPTZ) return this.$modal.notifyWarning('当前设备不支持云台控制功能');
            let value = 1; //左
            this.webPlayer.setPTZContinuous(value);
        },
        rightClick() {
            let isSupportPTZ = this.webPlayer.isSupportPTZ();
            if (!isSupportPTZ) return this.$modal.notifyWarning('当前设备不支持云台控制功能');
            let value = 2; //左
            this.webPlayer.setPTZContinuous(value);
        },
        topClick() {
            let isSupportPTZ = this.webPlayer.isSupportPTZ();
            if (!isSupportPTZ) return this.$modal.notifyWarning('当前设备不支持云台控制功能');
            let value = 3; //左
            this.webPlayer.setPTZContinuous(value);
        },
        bottomClick() {
            let isSupportPTZ = this.webPlayer.isSupportPTZ();
            if (!isSupportPTZ) return this.$modal.notifyWarning('当前设备不支持云台控制功能');
            let value = 4; //左
            this.webPlayer.setPTZContinuous(value);
        },
        // 停止云台控制
        mouseupClick() {
            let value = 0; 
            this.webPlayer.setPTZContinuous(value);
        },
        // 放大
       async magnify() {
            let isSupport = this.webPlayer.isSupportDeviceZoom();
            if (!isSupport) return this.$modal.notifyWarning('当前设备不支持缩放功能');
            let value = await this.webPlayer.getDeviceZoom();//获取设备倍数值
            value++;
            this.webPlayer.setDeviceZoom(value);//设置镜头倍数
        },
        // 缩小
        async lessen() {
            let isSupport = this.webPlayer.isSupportDeviceZoom();
            if (!isSupport) return this.$modal.notifyWarning('当前设备不支持缩放功能');
            let value = await this.webPlayer.getDeviceZoom();//获取设备倍数值
            value--;
            this.webPlayer.setDeviceZoom(value);//设置镜头倍数
        },
        // 近焦距
        async near() {
            let isSupport = this.webPlayer.isSupportDeviceFocus();
            if (!isSupport) return this.$modal.notifyWarning('当前设备不支持聚焦功能');
            let value = await this.webPlayer.getDeviceFocus();//获取设备焦距值
            value--;
            this.webPlayer.setDeviceFocus(value);//设置镜头焦距
        },
        // 远焦距
        async distant() {
            let isSupport = this.webPlayer.isSupportDeviceFocus();
            if (!isSupport) return this.$modal.notifyWarning('当前设备不支持聚焦功能');
            let value = await this.webPlayer.getDeviceFocus();//获取设备焦距值
            value++;
            this.webPlayer.setDeviceFocus(value);//设置镜头焦距
        },
        // 销毁播放器实例
        destroy() {
            // console.log(this.webPlayer)
            if (this.webPlayer != null) {
                this.webPlayer.destroy();
            }
            this.playerflag = 3;
            this.playerVolumeflag = true//声音
            this.audio = true//麦克风
            this.playerOptions = {
                playbackRates: [0.7, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: "video/mp4", // 类型
                        // src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", // url地址
                        src: "", // url地址
                    },
                ],
                poster: "", // 封面地址
                width: "1000", //document.documentElement.clientWidth 播放器宽度
                height: 100,
                notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: true, // 是否显示剩余时间功能
                    fullscreenToggle: true, // 是否显示全屏按钮
                    volumeControl: true, // 声音控制键
                    playToggle: true, // 暂停和播放键
                    progressControl: true, // 进度条
                },
            }
        },
        // 下载图片
        phoneDown(imgsrc, name) {
            //下载图片地址和图片名
            let image = new Image()
            // 解决跨域 Canvas 污染问题
            image.setAttribute('crossOrigin', 'anonymous')
            image.onload = function () {
                let canvas = document.createElement('canvas')
                canvas.width = image.width
                canvas.height = image.height
                let context = canvas.getContext('2d')
                context.drawImage(image, 0, 0, image.width, image.height)
                let url = canvas.toDataURL('image/png') //得到图片的base64编码数据
                let a = document.createElement('a') // 生成一个a元素
                let event = new MouseEvent('click') // 创建一个单击事件
                a.download = name || 'photo' // 设置图片名称
                a.href = url // 将生成的URL设置为a.href属性
                a.dispatchEvent(event) // 触发a的单击事件
            }
            image.src = imgsrc
        },
    },
    async created() {
        // await this.Cameraget()//获取摄像头账号密码
        // await this.Cameralogin() //摄像头账号登录
        // await this.reqCamerainfo()//获取摄像头设备详情
        // await this.initWebPlayer()
    },
    mounted() {
        //     document.addEventListener('visibilitychange',function(e){
        //     //   console.log(document.visibilityState);
        //   let state = document.visibilityState
        //     if(state == 'hidden'){
        //         console.log(document.visibilityState,'用户离开了');
        //     }
        //     if(state == 'visible'){
        //         console.log(document.visibilityState,'回来了');
        //     }
        //     });
    },
};
</script>


<style lang="less" scoped>
.div_box {
    // height: 79vh;
    // height: calc(100vh - 122px);
    overflow: auto;
    width: 100%;
    display: flex;
    justify-content: center;

    .div_left {
        width: 63%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .webplayer_menu {
            background: @primaryBgcolor5;
            width: 80%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 55px;
            padding: 0 16px;
            box-sizing: border-box;
            position: relative;

            i {
                font-size: 30px;
                cursor: pointer;
            }

            .webplayer-menu--left {
                width: 50%;
            }

            .webplayer-menu--right {
                width: 50%;
                // padding-left: 10.5%;
                box-sizing: border-box;
                display: flex;
                justify-content: flex-end;
                align-items: center;

                i {
                    margin-left: 28px;
                }
            }

        }

        .huifang {
            display: flex;
            background-color: #E8E8E8;
            border-radius: 20px;
            // margin: 3% auto;
            margin-top: 2%;
            margin-bottom: 2%;

            >div {
                width: 65px;
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 20px;
                color: #000000;
                cursor: pointer;

                &:hover {
                    color: #7467EF;
                }
            }
        }

        .slot_tips_h5player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: auto;
            background: rgba(0, 0, 0, 0.5);
            font-size: 14px;
            display: flex;
            color: rgba(255, 255, 255, 0.8) !important;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            i {
                font-size: 60px;
            }

            span {
                margin: 7px;
                font-size: 16px;
            }
        }
    }

    .div_right {
        position: absolute;
        right: -22%;
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: @primaryThemeTxtColor2;
        top: 30%;
    }

    .div_zoom {
        position: absolute;
        right: -22%;
        width: 30%;
        top: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @primaryFFFColor3;

        >div:nth-of-type(2) {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
        }

        >div:first-of-type {
            width: 26px;
            height: 26px;
            background: @primaryBgcolor3;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            cursor: pointer;
        }

        >div:last-of-type {
            width: 26px;
            height: 26px;
            background: @primaryBgcolor3;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22px;
            cursor: pointer;
        }
    }

    .div_focal {
        position: absolute;
        right: -22%;
        width: 30%;
        top: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @primaryFFFColor3;

        >div:nth-of-type(2) {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
        }

        >div:first-of-type {
            width: 26px;
            height: 26px;
            background: @primaryBgcolor3;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            cursor: pointer;
        }

        >div:last-of-type {
            width: 26px;
            height: 26px;
            background: @primaryBgcolor3;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22px;
            cursor: pointer;
        }
    }
}

::v-deep .video-player {
    width: 100% !important;
}

.video-ctrl-box {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: @primaryBgcolor3;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    .ctrl-circle {
        position: absolute;
        width: 70px;
        height: 70px;
        background: @primaryBgcolor4;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translateY(-50%) translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        color: @primaryFFFColor3;
    }

    i {
        cursor: pointer;
        position: absolute;
        color: @primaryFFFColor4;

        &:active {
            color: #7467EF;
        }
    }

    .el-icon-caret-left {
        top: 47%;
        left: 27px;
        transform: translateX(-50%) scale(1.5);
    }

    .el-icon-caret-right {
        top: 48%;
        right: 11px;
        transform: translateX(-50%) scale(1.5);
    }

    .el-icon-caret-top {
        left: 50%;
        transform: translateX(-50%) translateY(17px) scale(1.5);
    }

    .el-icon-caret-bottom {
        left: 50%;
        bottom: 35px;
        transform: translateX(-50%) translateY(16px) scale(1.5);
    }
}</style>